<template>
  <div v-if="show" class="popupBox">
    <div class="popup">
      <div class="title flexs flexsBet">
        <h5>{{title}}</h5>
        <img @click="$emit('onClone',false)" src="@/assets/close.png" alt="" />
      </div>
      <div class="popupMain">
          <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
      props:['show','title']
  };
</script>

<style lang="less" scoped>
  .popupBox{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 111;
  }
  .popup {
    padding: 23px 49px;
    padding-top: 74px;
    width: fit-content;
    height: fit-content;
    background: #0c2451;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(252,252,252,0.10); 
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 111;
    .title {
      position: absolute;
      left: 0;
      top: 23px;
      width: 100%;
      h5 {
        font-size: 24px;
        color: #ffffff;
        text-align: center;
        line-height: 1;
        align-items: center;
      }
      img{
        width: 28px;
        height: 28px;
        cursor: pointer;
        position: absolute;
        top: -5px;
        right: 23px;
      }
    }   
    .popupMain {
      width: 100%;
      min-height: 284px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-items: center;
    }
  }
</style>
